import React from 'react'

export default class Bind extends React.Component {
    constructor() {
        super()
        this.state = {
            msg:'需求点击按钮改变值'
        }
    }
    render() {
        return <div>
            Bind组件
            <hr />
            <h3>{this.state.msg}</h3>
            <button type="button" onClick={() => this.clickHander('参数1', '参数2')}>按钮</button>
            <hr />
            {/* 只绑定state和文本框,则是只读的单向绑定,后面需要手动写redOnly 或者onChange={()=>{调用函数}}*/}
            {/* <input type="text" value={this.state.msg} readOnly/> */}
            <input type="text" value={this.state.msg} onChange={(e)=>this.textChange(e)} ref='abcd'/>
        </div>
    }
    //这是一个实例方法 this.调用
    //需求 点击按钮改变msg值
    //不能用vue中 this.state.msg修改值 ,不好使
    //React提供一个方法 this.setState({msg:'123'})
    //this.setState 异步操作,想要立即拿到 需要第二个参数回调 function(){}
    clickHander = (arg1, arg2) => {
        console.log('ok' + arg1 + arg2)

        this.setState({
            msg:'1234567890'
        },function(){
            console.log(this.state.msg)
        })
    }

    textChange =(e) =>{
        // console.log(e.target.value)
        // console.log(this.refs.abcd.value)
        // React只有单向绑定,如果需要双向需要手动写
        // 方法1: e.target.value
        // 方法2: this.refs.abcd.value

        const newVal =e.target.value
        this.setState({
            msg:newVal
        })
    }

}